<template>
	<view class="home-content">
		<view class="top">
			<view class="avatar">
				<u-avatar :src="avatar" size="60rpx"></u-avatar>
			</view>
			<view class="user-name">
				<text>{{userName}}</text>
			</view>
			<view class="issue-time">
				<uni-dateformat format="yyyy年MM月dd日" :date="dataObj.publish_date"
					:threshold="[60000, 3600000*24*30]"></uni-dateformat>
			</view>
			<view class="operation" @click="moreClick">
				<u-icon name="more-dot-fill" color="#a0a3a7" size="20"></u-icon>
			</view>
		</view>
		<view class="middle">
			<view class="title title-primary ellipsis-2row" @click="goDetail">
				{{dataObj.title}}
			</view>
			<view class="article ellipsis-2row" v-show="dataObj.desc" @click="goDetail">
				{{dataObj.desc}}
			</view>
			<view class="img-show" v-show="dataObj.thumb.length">
				<u--image v-for="(imgItem,index) in dataObj.thumb" @click="imgClick(index)" :src="imgItem" width="100%"
					height="250rpx" radius="10rpx"></u--image>
			</view>
		</view>
		<view class="bottom">
			<view class="watch">
				<u-icon name="eye" :label="dataObj.view_count"></u-icon>
			</view>
			<view class="comment" @click="goDetail">
				<u-icon name="chat" :label="dataObj.comment_count?dataObj.comment_count:'评论'"></u-icon>
				<!-- <text>评论</text> -->
			</view>
			<view class="upvote" @click="goDetail">
				<u-icon name="thumb-up" :label="dataObj.like_count?dataObj.like_count:'点赞'"></u-icon>
				<!-- <text>39</text> -->
			</view>
		</view>
		<u-action-sheet @close="sheetClose" @select="sheetSelect" :closeOnClickOverlay="true" :actions="list"
			cancelText="取消" :show="sheetShow" round="20rpx"></u-action-sheet>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from "@/utils/common.js"

	const db = uniCloud.database()
	export default {
		name: "home-content",
		created() {
			console.log('home-content',this.dataObj);
		},
		props: {
			dataObj: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				sheetShow: false,
				list: [{
						name: '修改',
						type: 'edit',
						disabled: true,
					},
					{
						name: '删除',
						type: 'del',
						color: '#f56c6c',
						disabled: true,
					},
				],
			};
		},
		computed: {
			avatar() {
				return this?.dataObj?.user_id[0]?.avatar_file?.url
			},
			userName() {
				return getUserInfo.getUserName(this.dataObj)
			},
		},
		methods: {
			sheetSelect(e) {
				// console.log({
				// 	e
				// });
				if (e.type == 'del') {
					this.delById()
				} else if (e.type == 'edit') {
					this.goEditPage()
				}

			},
			sheetClose(e) {
				this.sheetShow = false
				// console.log({
				// 	e
				// });
			},
			goEditPage() {
				const article_id = this.dataObj._id
				uni.navigateTo({
					url: `/pages/edit/edit?article_id=${article_id}&mode=update`
				})
			},
			delById() {
				uni.showLoading({
					title: "操作中..."
				})
				db.collection("article").doc(this.dataObj._id).update({
					delState: true
				}).then(res => {
					uni.hideLoading();
					uni.showToast({
						title: "删除成功",
						icon: "none"
					})
					this.$emit("emitDelEvent", true)
				}).catch(err => {
					console.log('del出错', err);
					uni.hideLoading()
				})
			},
			moreClick() {
				// 当前登录用户的id
				const userInfo = uniCloud.getCurrentUserInfo()
				// 发布当前文章的用户的id
				const userArticle = this.dataObj;
				userInfo.uid == userArticle.user_id[0]._id ?
					this.list.forEach(item => item.disabled = false) :
					''
				this.sheetShow = !this.sheetShow
			},
			goDetail() {
				uni.navigateTo({
					url: `/pages/detail/detail?_id=${this.dataObj._id}&user_id=${this.dataObj.user_id[0]._id}`
				})
			},
			imgClick(index) {
				uni.previewImage({
					current: index,
					urls: this.dataObj.thumb,
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.home-content {
		padding-bottom: $pd * 4;
	}

	.top {
		display: grid;
		grid-template-columns: repeat(3, auto) 1fr;
		grid-template-rows: 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		align-items: center;

		view:nth-of-type(n+2) {
			padding: 0 8rpx;
		}

		.issue-time {
			font-size: $font-size-second;
			color: $fz-color-second;
		}

		.operation {
			display: flex;
			justify-content: right;
		}
	}

	.middle {
		margin-top: $mg;

		.title {}

		.article {
			margin-top: 10rpx * 2;
			font-size: 30rpx;
			color: $fz-color-second;
		}

		.img-show {
			display: flex;
			margin-top: 20rpx;

			uni-view {
				width: 32.33333333%;
				margin-right: 1%;


			}
		}
	}

	.bottom {
		display: flex;
		justify-content: space-evenly;
		margin-top: $mg * 2;

		.watch {}

		.comment {}

		.upvote {}
	}
</style>